<template>
  <div class="app-container">
    <Listaction ref="actionref" title="查看留言" :type="2"></Listaction>
    <div class="filter-container" v-if="baseData">
      <div>
        <el-cascader :options="baseData.ly" class="filter-item w-200" clearable filterable placeholder="选择领域"
                     :props="{ expandTrigger: 'hover' }" v-model="listQuery.c2"
        ></el-cascader>
        <el-select v-model="listQuery.type" class="filter-item w-200" placeholder="请选择类别" clearable>
          <el-option
            v-for="item in baseData.type"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker
          v-model="listQuery.checktime"
          type="daterange"
          range-separator="至"
          class="filter-item"
          style="width:300px"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
        <el-cascader :options="baseData.leaderInfo" class="filter-item w-200" style="width:300px" clearable filterable
                     placeholder="选择责任人" :props="{ expandTrigger: 'hover' }" v-model="listQuery.leader"
        ></el-cascader>
        <el-select v-model="listQuery.status" class="filter-item w-200" placeholder="请选择状态" clearable>
          <el-option
            v-for="item in baseData.statusAry"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div style="border-top:1px solid #eee;padding-top:10px;">
        <el-input
          v-model="listQuery.keyword"
          size="small"
          placeholder="请输入标题"
          clearable
          style="width:350px;"
          class="filter-item w-200"
        />
        <el-input
          v-model="listQuery.phone"
          size="small"
          placeholder="请输入手机"
          clearable
          class="filter-item w-200"
        />
        <el-input
          v-model="listQuery.wid"
          size="small"
          placeholder="请输入留言WID"
          clearable
          class="filter-item w-200"
        />
        <el-button-group class="filter-item">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-search"
            @click="search"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-refresh"
            @click="refresh"
          >
            重置
          </el-button>

        </el-button-group>
      </div>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
      @sort-change="sortChange"
    >

      <el-table-column
        width="80"
        label="wid"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.wid }}
        </template>
      </el-table-column>


      <el-table-column
        width="80"
        label="状态"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==7" type="warning">已受理</el-tag>
          <el-tag v-else-if="scope.row.status==2" type="info">待处理</el-tag>
          <el-tag v-else-if="scope.row.status==3 || scope.row.status==4 || scope.row.status==5" type="success">已办理
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        width="430"
        label="标题"
        align="left"
      >
        <template slot-scope="scope">
          <div @click="doAction(scope.row.wid)">
            <div style="color:#409EFF;font-size:14px;cursor: pointer">
              {{ scope.row.title }}
            </div>
            <div style="display: flex;align-items: center">
              <div v-for="(item,idx) in scope.row.lingyu" class="titletag">
                {{ item }}
              </div>
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        width="180"
        label="负责人"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.lid }}</div>
          <div v-if="scope.row.passon_name" class="cover">@{{ scope.row.passon_name }}</div>
        </template>
      </el-table-column>

      <el-table-column
        width="135"
        label="发帖时间"
        align="center"
        prop="create_time"
        :sortable="'custom'"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.create_time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="135"
        label="截止时间"
        prop="endTime"
        :sortable="'custom'"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.endTime }}</div>
        </template>
      </el-table-column>
      <el-table-column
        width="180"
        label="发帖人"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.u_name }}({{ scope.row.come_from }})</div>
        </template>
      </el-table-column>

      <el-table-column
        width="135"
        label="回复时间"
        align="center"
      >
        <template slot-scope="scope">
          <div style="font-size:12px">{{ scope.row.reply_time }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="更多信息"
        width="135"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-more"
            size="mini"
            @click="goWid(scope.row.wid)"
          />
        </template>
      </el-table-column>
    </el-table>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

  </div>
</template>
<style lang="less">
.el-descriptions-item__content {
  font-size: 14px;
}

.el-drawer__body {
  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}
</style>
<style scoped lang="less">

.titletag {
  color: #fff;
  padding: 0 5px;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  border-radius: 3px;
  background: #409EFF;
  margin: 5px 5px 0 0;
}

.cover {
  font-size: 12px;
  color: #739099;
}

.reply-item {
  color: #409EFF;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  padding: 15px;
  margin: 10px 0;
  border-radius: 5px;

  &.delete_item {
    color: #999;
    border-color: #ddd;
    background-color: #eee;

    .headerLine {
      border-bottom: 1px solid #ddd !important;
    }
  }

  .headerLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c6e2ff;

    .actionButton {
      cursor: pointer;
    }
  }

  .reply-user {
    font-weight: bold;
    padding-bottom: 5px;
    display: flex;


    .user .delete {
      background: red;
      color: #fff;
      padding: 2px 5px;
      margin-right: 5px;
      border-radius: 5px;
    }

    .t {
      font-weight: normal;
      color: #999;
      margin-left: 30px;
    }
  }
}

.titleH {
  .title {
    color: #20a0ff;
    font-size: 22px;
    font-weight: bold;

    &:hover {
      color: #369;
    }
  }
}
</style>
<script>
import Pagination from '@/components/Pagination'
import Listaction from '@/components/wz/listaction'
import {getWzlist, getWzParams} from '@/api/wz'

let id = 0
export default {
  components: {
    Pagination,
    Listaction
  },
  data() {
    return {
      actionform: [],
      activeNames: ['1', '2'],
      actionloading: false,
      actionData: [],
      action: false,
      total: 0,
      list: [],
      drawer: true,
      checkLeaderData: [],
      checkLeader: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        c2: '',                    //领域
        type: '',                  //类别
        checktime: '',             //时间范围
        leader: '',                //领导
        status: '',                 //状态
        keyword: '',                //标题
        phone: '',                  //手机
        wid: '',                    //wid
      },
      baseData: [],
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
    }
  },
  created() {
    this.WzParams()
    let uid = this.$route.query.uid
    if (uid) {
      this.listQuery.u_uid = uid
      this.fetchData()
    } else {
      this.fetchData()
    }
  },
  methods: {
    doAction(wid){
      this.$refs.actionref.openAction(wid)
    },
    search() {
      this.fetchData()
    },
    goWid(wid) {
      this.$router.push({path: '/wz/action', query: {wid: wid}})
    },
    refresh() {
      this.listQuery = {
        page: 1,
        limit: 20
      }
      localStorage.setItem('wzbaseData', '')
      this.fetchData()
      this.WzParams()
    },
    WzParams() {
      let baseData = localStorage.getItem('wzbaseData')
      if (!baseData) {
        getWzParams().then(response => {
          this.baseData = response.data
          localStorage.setItem('wzbaseData', JSON.stringify(this.baseData))
        })
      } else {
        this.baseData = JSON.parse(baseData)
      }
    },
    sortChange(column) {
      this.fetchData(column)
    },
    fetchData(column) {
      this.listLoading = true
      if (column) {
        this.listQuery.orderFiled = column.prop
        this.listQuery.orderType = column.order
      }
      getWzlist(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        if (this.listQuery.u_uid) {
          this.listQuery.u_name = response.data.data[0].u_name
        }
      })
    },
    submit() {

    }
  }
}
</script>
